{extend name="base" /}
{block name="title"}创建实例 - 客服控制台{/block}
{block name="left"}{include file="left_admin" /}{/block}
{block name="content"}
<div class="tpl-content-wrapper">
    <div class="container-fluid am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 创建实例
                    <small>Create example</small>
                </div>
                <p class="page-header-description">系统会自动配置实例参数，你只需输入验证码后即可创建。</p>
            </div>
            <div class="am-u-lg-3 tpl-index-settings-button">
                <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置
                </button>
            </div>
        </div>
    </div>

    <div class="row-content am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">创建实例</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body am-fr">
                        <form action="/index.php/staff/Example/createExample"
                              class="am-form tpl-form-border-form tpl-form-border-br"
                              method="post" onsubmit="return check();">
                            {:token()}

                            <div class="am-form-group">
                                <label class="am-u-sm-2 am-form-label">验证码</label>
                                <div class="am-u-sm-3">
                                    <input type="text" class="tpl-form-input" id="captcha-text"
                                           placeholder="请输入验证码" name="captcha">
                                </div>
                                <div class="am-u-sm-7">
                                    <img src="{:captcha_src()}" class="create-example-captcha-img" id="captcha-img">
                                </div>
                            </div>

                            <div class="am-form-group">
                                <div class="am-u-sm-10 am-u-sm-push-2">
                                    <button type="submit" class="am-btn am-btn-success">创建</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
    var layer = null;
    layui.use(['layer', 'form'], function () {
        layer = layui.layer;
    });

    $(function () {
        $('#captcha-img').click(function () {
            $(this).attr('src', $(this).attr('src'));
            $('#captcha-text').val('');
        });
    });

    function check() {
        if ($('#captcha-text').val().length == 5) {
            return true;
        }
        layer.msg('请输入5位验证码', {icon: 5});
        return false;
    }
</script>
{/block}